import * as echarts from '../../static/ec-canvas/echarts';
echarts.registerMap('china', require('echarts/map/json/china.json'));
let provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
let provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
export default {
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    };
  },
};
export function setupECharts() {
  return {
    onInit: initChart
  };
}
function  getProvinceMapOpt(canvas,width,height,dpr,provinceAlphabet)  {
  const key= require('../province/'+ provinceAlphabet + '.json');
  echarts.registerMap(provinceAlphabet, key);
  const localData=key.features[0].properties.cp;     //获取省份的中心坐标
  const chart = echarts.init(canvas, width,height,dpr, {
    width:width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    visualMap: {
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: [{
      type: 'map',
      mapType:provinceAlphabet,
      center:localData,
      zoom:1.5,
      roam: true, // 启用拖动
      label: {
        normal: {
          show: true
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: true,
      data: [
        { name: '郑州市', value: 100 },
        { name: '洛阳市', value: 10 },
        // 其他省份的数据...
      ]
    }],
  };
  chart.setOption(option,true);
  return chart;
}

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  this.canvas1=canvas;
  canvas.setChart(chart);

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    visualMap: {
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: [{
      type: 'map',
      mapType: 'china',
      zoom:1.5,
      roam: true, // 启用拖动
      label: {
        normal: {
          show: true
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: true,
      data: [

        // 其他省份的数据...
      ]
    }],
  };

  chart.setOption(option);
  // 注册事件
  chart.on('click', function (params) {
    // params 包含了点击的相关信息，例如省份名称等
    const provinceIndex = provincesText.findIndex(x => params.name === x);
    if (provinceIndex === -1) return;
    const provinceAlphabet = provinces[provinceIndex];
    console.log(provinceAlphabet)
    getProvinceMapOpt(canvas,width,height,dpr,provinceAlphabet);
    // 处理点击事件的逻辑
  });

  return chart;
}
